-
Notifications
You must be signed in to change notification settings - Fork 3
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Implemented Apartment Image Frontend #359
Conversation
[diff-counting] Significant lines: 238. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
PR Review
This pull request was nicely done! I appreciate your changes to Header.tsx for the Apartment and Landlord pages! The macro-level split between mobile and desktop layouts made it difficult to adjust every time a small change was made, but you made the code structure more concise by combining the two and using ternary operators to differentiate at the micro level. The photo carousel was also really well done. The modal design works perfectly on both desktop and mobile.
I would say it is nearly perfect, but I would like to point out a few things that could be improved for consistency and simplicity purposes.
- After removing parts of the code in Header.tsx, you can remove the imports that are no longer used to simplify the code, below is what eslint noticed:
src/components/Apartment/Header.tsx
Line 6:3: 'Button' is defined but never used @typescript-eslint/no-unused-vars
Line 9:3: 'Avatar' is defined but never used @typescript-eslint/no-unused-vars
Line 192:5: 'btnSection' is assigned a value but never used @typescript-eslint/no-unused-vars
src/components/Landlord/Header.tsx
Line 10:3: 'Avatar' is defined but never used @typescript-eslint/no-unused-vars
Line 150:9: 'icon' is assigned a value but never used @typescript-eslint/no-unused-vars
src/components/PhotoCarousel/PhotoCarousel.tsx
Line 2:10: 'Modal' is defined but never used @typescript-eslint/no-unused-vars
- On mobile, the marginLeft styling seems to incorrectly shift the header image, causing the header image to not fully extend to the edges of the screen. If you zoom in on the left, you can see a pixel gap between the edge of the screen and the image. This is a really small thing, but it could be nice to fix if you have the time. It could also have to do with the root paddingLeft and paddingRight, because when I disabled those in developer tools, it resolved the issue.
Overall, these are extremely minor issues, so great work on this PR, it looks great!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Clean implementation. UI looks good.
Summary
This pull request is the first step towards styling apartment images and implementing a photo carousel.
Test Plan
Notes